<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title th:text="${webinfo.webname}"></title>
    <link rel="icon" th:href="'/images/'+${webinfo.webicon}"/>
    <!--bootstrap3 cdn-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!--font-awesome-->
    <link rel="stylesheet" href="/style/css/font-awesome.min.css">

    <!--layui-->
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="../layui/layui.js"></script>


    <link rel="stylesheet" href="/style/css/pushbar.css">
    <script src="/script/js/pushbar.js"></script>

    <!--自定义样式css-->
    <link rel="stylesheet" href="/style/theme/default/main.css">
    <!--js-->
    <script src="/script/js/me.js"></script>

    <style type="text/css">

    </style>

    <script language="javascript">


    </script>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-inverse navbar-fixed-top navbar-expand-md">
        <div>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:void(0);">
                    <span>
                        <img th:src="'/images/'+${webinfo.brandimg}" class="img-circle"
                             style="height: 30px;width: 30px">
                    </span>
                    <span th:text="${webinfo.webname}"></span>
                </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-menu">
                <ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp">
                    <li class="navli"><a class="navbar-link current" href="javascript:void(0);"
                                         onclick="homepage();">首页</a></li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="category();">分类</a>
                    </li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="archive();">归档</a></li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="whisper();">微语</a></li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="album();">相册</a></li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="me();">关于</a></li>
                    <li class="navli"><a class="navbar-link" href="javascript:void(0);" onclick="link();">友链</a></li>
                    <li>
                        <form class="navbar-form" action="artical" method="post">
                            <input type="text" name="keyword" class="form-control" placeholder="请输入关键字（回车搜索）"/>
                        </form>
                    </li>
                    <li class=""><a href="javascript:void(0);" id="music" title="来点音乐"><i class="fa fa-music"></i></a>
                    </li>
                    <li class=""><a href="javascript:void(0);" id="manage" title="后台"><i
                            class="layui-icon layui-icon-website"></i></a></li>
                    <li class="layui-hide-xs"><a href="javascript:void(0);" target="_blank" title="换肤"><i
                            class="layui-icon layui-icon-theme" id="skin"></i></a></li>
                    <th:block th:if="${session.userinfo} != null">
                        <li class=""><a href="javascript:void(0);"><cite th:text="${session.userinfo.nickname}"></cite></a>
                        </li>
                    </th:block>
                    <li class=""><a href="javascript:void(0);" data-pushbar-target="right"><i
                            class="layui-icon layui-icon-more-vertical"></i></a></li>
                </ul>
            </div>
        </div>
    </nav>

    <aside data-pushbar-id="right" class="pushbar from_right">
        <div class="title"><span data-pushbar-close class="close push_right"></span>
            Right
        </div>
    </aside>

    <div class="container-fluid layui-anim layui-anim-upbit">
        <div class="bull"><i class="fa fa-volume-up"></i></div>
        <div class="callboard">
            <ul class="menu" style="margin-top: 0px;">
                <li>這裏展示的是網站的公告，通過鏈接可以直接訪問!</li>
            </ul>
        </div>

        <div class="row">
            <div class="col-md-9">
                <div class="col-md-12">
                    <div class="block">
                        <div class="tab_box tab_bg">
                            <div class="tab_buttons">
                                <ul>
                                    <li class="tab_current" th:each="tabIndex ,tabIndexStat :${tabMmenuList}"
                                        th:if="${tabIndexStat.index==0}" th:text="${tabIndex.name}"/>
                                    <li th:each="tabIndex ,tabIndexStat :${tabMmenuList}"
                                        th:unless="${tabIndexStat.index==0}" th:text="${tabIndex.name}"/>
                                </ul>
                            </div>
                            <div class="tab_text">
                                <div class="tab_item" th:each="artTabList,artTabListStat :${tabArticalList}">
                                    <div class="tab_img">
                                        <!--背景图  大于2展示-->
                                        <ul th:if="${tabArticalList[artTabListStat.index].size() > 2}">
                                            <li>
                                                <a th:href="'view?&id='+${tabArticalList[artTabListStat.index].get(0).id}">
                                                    <img th:src="'images/'+${tabArticalList[artTabListStat.index].get(0).imgpath}">
                                                    <span th:text="${tabArticalList[artTabListStat.index].get(0).title}"></span>
                                                </a>
                                            </li>
                                            <li>
                                                <a th:href="'view?&id='+${tabArticalList[artTabListStat.index].get(1).id}">
                                                    <img th:src="'images/'+${tabArticalList[artTabListStat.index].get(1).imgpath}">
                                                    <span th:text="${tabArticalList[artTabListStat.index].get(1).title}"></span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <!--与后台要形成对应 只展示前五条-->
                                    <ul class="tab_list" style="padding-left: 0px;"
                                        th:if="${tabArticalList[artTabListStat.index].size() == 5}">
                                        <li th:onclick="'javascript:articalDetail('+${tabArticalList[artTabListStat.index].get(0).id}+')'">
                                            <i></i>
                                            <a href="javascript:void(0);"
                                               th:text="${tabArticalList[artTabListStat.index].get(0).title}"></a>
                                            <p th:text="${tabArticalList[artTabListStat.index].get(0).summary}"></p>
                                        </li>
                                        <li th:onclick="'javascript:articalDetail('+${tabArticalList[artTabListStat.index].get(1).id}+')'">
                                            <i></i>
                                            <a href="javascript:void(0);"
                                               th:text="${tabArticalList[artTabListStat.index].get(1).title}"></a>
                                            <p th:text="${tabArticalList[artTabListStat.index].get(1).summary}"></p>
                                        </li>
                                        <li th:onclick="'javascript:articalDetail('+${tabArticalList[artTabListStat.index].get(2).id}+')'">
                                            <i></i>
                                            <a href="javascript:void(0);"
                                               th:text="${tabArticalList[artTabListStat.index].get(2).title}"></a>
                                            <p th:text="${tabArticalList[artTabListStat.index].get(2).summary}"></p>
                                        </li>
                                        <li th:onclick="'javascript:articalDetail('+${tabArticalList[artTabListStat.index].get(3).id}+')'">
                                            <i></i>
                                            <a href="javascript:void(0);"
                                               th:text="${tabArticalList[artTabListStat.index].get(3).title}"></a>
                                            <p th:text="${tabArticalList[artTabListStat.index].get(3).summary}"></p>
                                        </li>
                                        <li th:onclick="'javascript:articalDetail('+${tabArticalList[artTabListStat.index].get(4).id}+')'">
                                            <i></i>
                                            <a href="javascript:void(0);"
                                               th:text="${tabArticalList[artTabListStat.index].get(4).title}"></a>
                                            <p th:text="${tabArticalList[artTabListStat.index].get(4).summary}"></p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--展示分类内容-->
                <div class="col-md-6" th:each="category, articalBolck :${categoryList}">
                    <div class="block">
                        <h2 class="blog_type fa fa-bars" th:text="' '+${category['categoryName']}"></h2>
                        <div class="content-list" th:each="artical ,articalStat: ${articals[articalBolck.index]}">
                            <span class="blog_date" th:text="${artical.createdate}"></span>
                            <a href="javascript:void(0);" th:onclick="'javascript:articalDetail('+${artical.id}+')'"
                               th:text="${artical.title}"
                               th:title="${artical.title}"></a>
                        </div>

                        <div class="index-card-footer blog_more">
                            <a href="javascript:void(0);"
                               th:onclick="'javascript:category('+${category['id']}+')'">更多</a>
                        </div>
                    </div>
                </div>

                <!--展示推荐书籍模块-->
                <div class="col-md-8">
                    <div class="block">
                        <h2 class="blog_type"><i class="fa fa-book"></i> 推荐书籍</h2>
                        <div class="col-md-6">
                            <div class="content-list" th:each="book ,bookStat:${bookListLeft}">
                                <span class="blog_date" th:text="${book.publishDate}"></span>
                                <a href="javascript:void(0);" th:onclick="'javascript:readbook('+${book.id}+')'"
                                   th:text="${book.bookName}"
                                   th:title="${book.bookName}"></a>
                            </div>
                            <div class="index-card-footer"></div>
                        </div>
                        <div class="col-md-6">
                            <div class="content-list" th:each="book ,bookStat:${bookListRight}">
                                <span class="blog_date" th:text="${book.publishDate}"></span>
                                <a href="javascript:void(0);" th:onclick="'javascript:readbook('+${book.id}+')'"
                                   th:text="${book.bookName}"
                                   th:title="${book.bookName}"></a>
                            </div>
                            <div class="index-card-footer blog_more">
                                <a href="javascript:void(0);" onclick="javascript:book();">更多</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!--展示在线工具模块-->
                <div class="col-md-4">
                    <div class="block">
                        <h2 class="blog_type fa fa-star"> 在线工具</h2>
                        <div class="content-list" th:each="tool :${toolList}">
                            <span class="blog_date" th:text="${tool.addDate}"></span>
                            <a th:href="${tool.url}" target="_blank" th:text="${tool.toolName}"
                               th:title="${tool.toolName}"></a>
                        </div>
                        <div class="index-card-footer blog_more">
                            <a href="javascript:void(0);" onclick="javascript:tool();">更多</a>
                        </div>
                    </div>
                </div>

                <!--展示部分文章信息-->
                <div class="col-md-12">
                    <div class="block">
                        <h2 class="blog_type fa fa-feed"> 最新更新</h2>
                        <div class="tab_bg blog_list">
                            <ul>
                                <!--多图模式 置顶设计-->
                                <li th:each="articaltop :${articalTop}">
                                    <h3 class="blog_title">
                                        <b>【顶】</b>
                                        <a href="javascript:void(0);"
                                           th:onclick="'javascript:articalDetail('+${articaltop['id']}+')'"
                                           th:text="${articaltop['title']}"></a>
                                    </h3>
                                    <span class="blog_head_img">
                                    <a href="javascript:void(0);"
                                       th:onclick="'javascript:articalDetail('+${articaltop['id']}+')'">
                                        <img src="images/b01.jpg" alt="">
                                    </a>
                                	<a href="javascript:void(0);"
                                       th:onclick="'javascript:articalDetail('+${articaltop['id']}+')'">
                                        <img src="images/b02.jpg" alt="">
                                    </a>
                                	<a href="javascript:void(0);"
                                       th:onclick="'javascript:articalDetail('+${articaltop['id']}+')'">
                                        <img src="images/b03.jpg" alt="">
                                    </a>
                                	<a href="javascript:void(0);"
                                       th:onclick="'javascript:articalDetail('+${articaltop['id']}+')'">
                                        <img src="images/b04.jpg" alt="">
                                    </a>
                                </span>
                                    <p class="blog_text">
                                        <a href="javascript:void(0);" th:text="${articaltop['summary']}"></a>
                                    </p>
                                    <p class="blog_info">
                                        <i class="blog_avatar">
                                            <img th:src="'images/'+${articaltop['avatar']}">
                                        </i>
                                        <span class="fa fa-user" th:text="' '+${articaltop['author']}"></span>
                                        <span class="fa fa-calendar">
                                            <a href="javascript:void(0);"
                                               th:onclick="archive([[${articaltop['createdate']}]]);"
                                               th:text="' '+${articaltop['createdate']}"></a>
                                        </span>
                                        <span class="fa fa-bookmark">
                                            <a href="javascript:void(0);"
                                               th:onclick="category([[${articaltop['categoryId']}]]);"
                                               th:text="' '+${articaltop['categoryName']}"></a>
                                        </span>

                                        <th:block th:each="tag : ${articaltop['tags']}">
                                            <span class="fa fa-tag">
                                                <a th:href="'artical?tag='+${tag}" th:text="' '+${tag}"></a>
                                            </span>
                                        </th:block>
                                        <a href="javascript:void(0);"
                                           th:onclick="'javascript:articalDetail('+${articaltop['id']}+')'"
                                           class="blog_more">阅读更多</a>
                                    </p>
                                </li>

                                <!--无图模式-->
                                <li th:each="artical :${articalsList}">
                                    <h3 class="blog_title">
                                        <a href="javascript:void(0);"
                                           th:onclick="'javascript:articalDetail('+${artical['id']}+')'"
                                           th:text="${artical['title']}"></a>
                                    </h3>
                                    <p class="blog_text">
                                        <a href="javascript:void(0);" th:text="${artical['summary']}"></a>
                                    </p>
                                    <p class="blog_info">
                                        <i class="blog_avatar"><img th:src="'images/'+${artical['avatar']}"></i>
                                        <span class="fa fa-user" th:text="' '+${artical['author']}"></span>
                                        <span class="fa fa-calendar">
                                            <a href="javascript:void(0);"
                                               th:onclick="archive([[${artical['createdate']}]]);"
                                               th:text="' '+${artical['createdate']}"></a>
                                        </span>
                                        <span class="fa fa-bookmark">
                                            <a href="javascript:void(0);"
                                               th:onclick="category([[${artical['categoryId']}]]);"
                                               th:text="' '+${artical['categoryName']}"></a>
                                        </span>

                                        <th:block th:each="tag : ${artical['tags']}">
                                            <span class="fa fa-tag">
                                                <a th:href="'artical?tag='+${tag}" th:text="' '+${tag}"></a></span>
                                        </th:block>
                                        <a href="javascript:void(0);"
                                           th:onclick="'javascript:articalDetail('+${artical['id']}+')'"
                                           class="blog_more">阅读更多</a>
                                    </p>
                                </li>
                            </ul>
                            <div id="pageinfo" style="text-align:center"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <!--站长信息-->
                <div class="col-md-12">
                    <div class="block feed" style="height: 340px;">

                        <div id="feed_widget">
                            <div class="feed-about">
                                <div class="about-main">
                                    <div class="about-img">
                                        <img th:src="'/images/'+${webinfo.prophoto}" onclick="profess();">
                                    </div>
                                    <div class="about-name">—&nbsp;<th:block th:text="${webinfo.nickname}"/>&nbsp;—
                                    </div>
                                    <div class="about-the" th:text="${webinfo.motto}">
                                    </div>
                                </div>
                                <ul>
                                    <li><a data-toggle="weixinpopvoer" data-placement="right" data-trigger="hover"
                                           class="weixin" rel="external nofollow" href="javascript:void(0);"
                                           data-original-title="" title=""><i class="fa fa-weixin"></i></a></li>
                                    <li><a class="qq" target="_blank" rel="external nofollow"
                                           href="http://wpa.qq.com/msgrd?v=3&amp;uin=599062183&amp;site=qq&amp;menu=yes"
                                           title="QQ"><i class="fa fa-qq"></i></a></li>
                                    <li><a class="weibo" target="_blank"
                                           href="https://weibo.com/2408268333/profile?topnav=1&amp;wvr=6&amp;is_all=1"
                                           title="微博"><i class="fa fa-weibo"></i></a></li>
                                    <li><a class="github" target="_blank" href="https://github.com/hairuizone"
                                           title="github"><i class="fa fa-github"></i></a></li>
                                    <li><a class="rss" target="_blank" rel="external nofollow" href="" title="RSS订阅"><i
                                            class="fa fa-rss"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!--专题内容-->
                <div class="col-md-12">
                    <div class="block">
                        <h2 class="blog_type fa fa-th"> 专题内容</h2>
                        <ul class="nav nav-tabs nav-stacked" th:each=" topic : ${topicList}">
                            <li><a href='javascript:void(0);' th:text="${topic.topicName}"
                                   th:onclick="'javascript:topic('+${topic.id}+')'"></a></li>
                        </ul>
                        <div class="index-card-footer2 blog_more">
                            <a href="javascript:void(0);" onclick="javascritp:topic();">更多</a>
                        </div>
                    </div>
                </div>

                <!--热门文章-->
                <div class="col-md-12">
                    <div class="block">
                        <h2 class="blog_type fa fa-clock-o"> 热门文章</h2>
                        <ul class="widget-content wideget-previous" th:each="artical : ${hotarticals}">
                            <li class="clr">
                                <a href="javascript:void(0);" th:title="${artical['title']}"
                                   th:onclick="'javascript:articalDetail('+${artical.id}+')'">
                                    <div class="time"><span class="r" th:text="${artical['day']}"></span>/<span
                                            class="y" th:text="${artical['month']+'月'}"></span></div>
                                    <div class="title" th:text="${artical['title']}"></div>
                                </a>
                            </li>
                        </ul>
                    </div>

                </div>

                <!--标签云-->
                <div class="col-md-12">
                    <div class="block blog_tags">
                        <h2 class="blog_type fa fa-tags"> 标签云</h2>
                        <ul>
                            <li th:each="tag : ${tags}">
                                <a th:href="'artical?tag='+${tag['name']}"
                                   th:title="${tag['name']}"
                                   th:text="${tag['name']} + ' (' + ${tag['count']} + ')'"
                                   th:style="'background-color:'+${tag['color']} +';'"/>
                            </li>
                        </ul>
                        <div class="index-card-footer2 blog_more">
                            <a href="javascript:void(0);" onclick="javascript:tags()">更多</a>
                        </div>
                    </div>
                </div>

                <!--最新评论-->
                <div class="col-md-12">
                    <div class="block blog_comments">
                        <h2 class="blog_type fa fa-comments"> 最新留言</h2>
                        <div class="index-card-footer3 comment">
                            <a href="javascript:void(0);" onclick="javascritp:message();">我要留言</a>
                        </div>
                        <ul>
                            <li th:each="comment :${comments}">
                                <span class="zb_avatar"><a href="javascript:void(0);"><img
                                        th:src="'/images/'+${comment['PROPHOTO']}" th:alt="${comment['NICKNAME']}"
                                        th:title="${comment['NICKNAME']}"><i th:title="${comment['NICKNAME']}"
                                                                             class="author-ident author6"></i></a></span>
                                <p><a href="JavaScript:void(0);" title="点击查看评论内容" th:text="${comment['CONTENT']}"></a>
                                </p>
                                <small th:text="'评论于：'+${comment['MESSAGE_TIME']}"></small>
                            </li>
                        </ul>

                    </div>
                </div>

                <!--网站信息-->
                <div class="col-md-12">
                    <div class="block web-info">
                        <h2 class="blog_type fa fa-info "> 站点信息</h2>
                        <ul>
                            <li><b>建站时间</b>：2019-03-24</li>
                            <li><b>网站程序</b>：springboot</li>
                            <li><b>今日访问量</b>：128次</li>
                            <li><b>文章统计</b>：59篇</li>
                            <li><b>文章评论</b>：490条</li>
                            <li><b>统计数据</b>：<a href="/">站内统计</a></li>
                            <li><b>微信公众号</b></li>
                            <li><img src="images/wxgzh.jpg" style="width: 120px;height: 120px;"></li>
                            <li><b>我的微信</b></li>
                            <li><img src="images/wx.jpg" style="width: 120px;height: 120px;"></li>
                        </ul>
                    </div>
                </div>

                <!--友情链接-->
                <div class="col-md-12">
                    <div class="block web-info">
                        <h2 class="blog_type fa fa-link "> 友情链接</h2>
                        <ul id="link-home">
                            <li th:each="link : ${links}">
                                <a th:href="${link.url}" target="_blank" th:title="${link.motto}"><img
                                        th:src="'/upload/link/'+${link.webicon}" th:alt="${link.motto}"
                                        th:text="${link.webname}"></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<footer>
    <div class="container" align="center">
        <div class="endnav">
            <p><b>站点声明：</b></p>
            <p>1、本站个人博客模板，均为本人设计，个人可以使用，但是未经许可不得用于任何商业目的。</p>
            <p>2、所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。举报邮箱：
                <a href="/" target="_blank">lihairuizone@sina.com</a>
            </p>
            <p>Copyright © <a href="/" target="_blank">www.lihairuizone.com</a> All Rights Reserved. 备案号：<a href="/"
                                                                                                            target="_blank">陕ICP备11002373号-1</a>
            </p>
        </div>
    </div>
    <div id="toolBackTop" style="right: 56.375px;">
        <a class="top" href="javascript:void (0);" title="返回顶部" onclick="gotop();return false;"></a>
    </div>
</footer>

<script type="text/javascript">
    /*<![CDATA[*/
    var pageCount = [[${pageInfo.total}]];//数量
    var pageNum = [[${pageInfo.pageNum}]];//当前页
    var pageSize = [[${pageInfo.pageSize}]];//每页显示数量
    /*]]>*/

    layui.config({
        base: '/script/js/util/'
    }).use(['laypage', 'layer'], function () {
        laypage = layui.laypage, layer = layui.layer;
        laypage.render({
            elem: 'pageinfo'
            , count: pageCount             //数据总数
            , limit: pageSize                      //每页显示条数
            , curr: pageNum                        //起始页
            , groups: 5                      //连续页码个数

            //跳转页码时调用
            , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
                //do something
                if (!first) {
                    //非首次加载 do something
                    var page = obj.curr;
                    url = "category?pageIndex=" + page;
                    window.location.href = url;
                }
            }
        });
    })
    //必須放在底部，否則會異常
    var pushbar = new Pushbar({
        blur: true,
        overlay: true,
    });
</script>
</body>
</html>
